<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
</head>

<body class="container">
    <h3 align="center">在提示框中显示图片</h3>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-bs-toggle="tooltip">提示框</button>
</body>
<script>
    $(function () {
        $('[data-bs-toggle="tooltip"]').tooltip({
            animation: true,                    //应用CSS淡入淡出过渡特效
            html: true,                        //支持HTML字符串
            offset: "100px",                    //设置偏移位置
            title: "<img src='2.jpg' width='300' class='img-fluid'>",  //提示内容
            placement: "right",                  //显示位置
            trigger: "click",                     //鼠标单击时触发
            delay: { show: 1000, hide: 1000 }           //显示和延迟的时间
        });
    })
</script>

</html>